<template>
  <div class="content-height scroll-bar">
    <div class="search-class">
      <Row>
        <Col span="6">
        <Select v-model="searchParams.enterpriseId"  style="width:200px;" ref="treeSelect" placeholder="机构">
          <Option v-for="item in list" :value="item.enterpriseId" :key="item.enterpriseId" style="display: none;">{{ item.title }}</Option>
          <Tree :data="orgList" style="padding-left:20px" @on-select-change="checkEng"></Tree>
        </Select>
        </Col>
        <Col span="6">
        <Select v-model="searchParams.deptId" style="width:200px;" clearable @on-open-change="getDepTree"  ref="treeSelectDep" placeholder="部门">
          <Option v-for="item in list1" :value="item.deptId" :key="item.deptId" style="display: none;">{{ item.title }}</Option>
          <Tree :data="depList" style="padding-left:20px" @on-select-change="checkDep"></Tree>
        </Select>
        </Col>
        <Col span="6">
        <Input v-model="searchParams.name" style="width:200px;" placeholder="姓名" />
        </Col>
        <Col span="6">
        <Input v-model="searchParams.tel" style="width:200px;" placeholder="联系电话" />
        </Col>
        <Col span="6" style="margin-top: 20px;">
        <Input v-model="searchParams.idCard" style="width:200px;" placeholder="身份证号" />
        </Col>
        <Col span="6" style="margin-top: 20px;">
        <Select v-model="searchParams.postId" clearable style="width:200px;" placeholder="职务">
          <OptionGroup label="通用">
            <Option v-for="item in postList.generalPostList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </OptionGroup>
          <OptionGroup label="专业">
            <Option v-for="item in postList.proprietaryPostList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </OptionGroup>
        </Select>
        </Col>
        <Col span='12' style="text-align: right">
        <span class="search-title"></span>
        <Button type="primary" style="margin-right: 15px" v-if="control.search" @click="getPersonList">搜索</Button>
        </Col>
      </Row>

    </div>
    <Table border :columns="columns" :data="personList" class="scroll-bar">
      <template slot-scope="{ row, index }" slot="action" >
        <span title="详情" class="button-class" v-if="control.detail" @click="detailBtn('details', row.personUserOrgId, '人员详情')" type="text">详情</span>
      </template>
    </Table>
    <Row type="flex" justify="center">
      <Col>
      <Page
        class="pagination"
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="[10,20,50,100]"
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
        show-elevator
        show-total
        show-sizer
      />
      </Col>
    </Row>
  </div>

</template>
<script>
  import tree from "vue-giant-tree";
  export default {
    name: 'search-enterprise-person',
    components: {
      tree
    },
    data() {
      return {
        buttonList:localStorage.getItem('buttonList'),
        button:[],
        searchParams:{},//搜索条件
        orgList: [],//机构树
        depList:[],//部门树
        postList:[],//施工状态
        personList:[],//人员列表
        list:[],//工程类型SELECT选择
        list1:[],//专业类型SELECT选择
        wbsList:[],//专业类型
        showTree:false,
        page: {
          total: 0,
          current: 1,
          pageSize: 10,
          totalPage: 0,
        },
        columns: [
          {
            title: '序号',
            align: 'center',
            width: 70,
            render: (h, params) => {
              return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
            }
          }, {
          title: '姓名',
          key: 'name',
          width: '250',
          align: 'center',
        }, {
          title: '性别',
          key: 'dictSex',
          align: 'center',
          width: '70',
        }, {
          title: '身份证号',
          align: 'center',
          key: 'idcard',
        },{
          title: '联系电话',
          align: 'center',
          key: 'tel',
        },{
          title: '职务',
          align: 'center',
          key: 'postName',
        },{
          title: '部门',
          align: 'center',
          key: 'deptName',
        },{
          title: '机构',
          align: 'center',
          key: 'enterpriseName',
        },{
          title: '操作',
          align: 'center',
          slot: 'action',
        }],
        listParam:{
          name:''
        },
        page: {
          total: 0,
          current: 1,
          pageSize: 10,
          totalPage: 0,
        },
        control:{}
      }
    },
    methods: {
      //跳转详情
      detailBtn(type,id,name){
        this.$router.push({
          path:`enterprise-person-detail/${type}/${id}/${name}`,
          query:{
            current: this.page.current,
            pageSize:this.page.pageSize,
          }
        })
      },
      //按钮权限
      buttonShow() {
        let buttonList = JSON.parse(localStorage.getItem('buttonList'))
        buttonList.map(val => {
          let key = Object.keys(val).toString()

          if (key === this.$route.name) {
            Object.values(val)[0].map(item => {
              if (item.code == 'P_040201_01') {
                this.control.search = true
              } else if (item.code == 'P_040201_02') {
                this.control.detail = true
              }
            })
          }
        })
      },
      //获取工程类型
      getOrgTree () {
        this.orgList = [];
        this.list = [];
        this.$api.projectInquiry.getOrgTree().then((res) => {
          if(res.code == 200){
            this.orgList = res.data;
            this.searchParams.enterpriseId = this.orgList[0].objectId
            let enterpriseId = this.orgList[0].objectId
            let title = this.orgList[0].shortName
            this.list.push({
              title,
              enterpriseId
            })
            this.getPostList(enterpriseId);
            this.getPersonList();
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      checkEng(data) {
          if(data.length>0){
            if(data[0].id){
              this.list = []
              this.list1 = []
              this.depList = []
              this.searchParams.deptId = ''
              let enterpriseId = data[0].objectId
              let title = data[0].title
              this.list.push({
                title,
                enterpriseId
              })
              this.getPostList(data[0].objectId);
              this.searchParams.enterpriseId = enterpriseId
              this.$refs.treeSelect.visible = false
            }

          }
      },
      //获取机构树
      getDepTree () {
        if(this.searchParams.enterpriseId){
          this.$api.projectInquiry.getDepTree(this.searchParams.enterpriseId).then((res) => {
            if(res.code == 200){
              this.depList = res.data;
            } else {
              this.$Message.error(res.data.msg);
            }
          })

        }else{
          this.$Message.warning('请先选择机构')
        }

      },
      checkDep(data){
        if(data.length>0) {
          this.list1 = [];
          let deptId = data[0].objectId
          let title = data[0].name
          this.list1.push({
            deptId,
            title
          })
          this.searchParams.deptId = deptId;
          this.getPostList(data[0].objectId);
          this.$refs.treeSelectDep.visible = false;
        }
      },
      //获取职务
      getPostList(id){
        let data = {
          objectId :id
        }
        this.$api.ProjectPerson.getJobList(data).then(res => {
          if (res.code === 200) {
            this.postList = res.data
          } else {
            this.$Message.error(res.message)
          }
        })
      },

      //获取项目列表
      getPersonList(){
        let data = {
          pageSize: this.page.pageSize,
          currentPage: this.page.current,
          whereMap:this.searchParams
        }
        data.whereMap.searchType = 1;
        this.$api.projectInquiry.getPersonList(data).then((res) => {
          if(res.code == 200){
            if (res.data.resultObject) {
              this.personList = res.data.resultObject;
              this.page.totalPage = res.data.totalPages;
              this.page.total = res.data.totalRecord
              this.personList.forEach(item => {
                if(item.dictSex == 'MALE'){
                  item.dictSex = '男'
                }else{
                  item.dictSex = '女'
                }
              });
            }else{
              this.personList = [];
            }
          } else {
            this.$Message.error(res.message);
          }
        })
      },

      pageChange (current) {
        this.page.current = current;
        this.getPersonList()
      },
      sizeChange (size) {
        this.page.pageSize = size;
        this.getPersonList()
      },
      //搜索
      searchAction () {
        this.page.current = 1;
        this.page.size = 10;
      },
    },
    mounted () {
      this.getOrgTree();
      this.buttonShow();
    },
    activated(){
      this.page.current = 1;
      this.page.size = 10;
      this.getPersonList()
    }

  }
</script>
<style>
  .tree{
    width: 250px;
    margin-left: 50px;
    overflow: auto;
    height: 200px;
  }
  .search-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: block;
  }
</style>